<template>
	<div>
		<sports-swiper :code="$route.params.id as string" class="mt-2" />
		<sports-match-list
			class="mt-2"
			:sportId="sportId"
			:is-live="false"
			is-league-hot
			:has-sports-toggle="false"
			subscribe-type="popular">
			<template #title>
				<sports-popular-titles :index="0"></sports-popular-titles>
			</template>
		</sports-match-list>
		<sports-match-list
			class="mt-2"
			:sportId="sportId"
			:is-live="false"
			:has-sports-toggle="false"
			subscribe-type="upcoming">
			<template #title>
				<sports-popular-titles :index="1"></sports-popular-titles>
			</template>
		</sports-match-list>
	</div>
</template>

<script lang="ts" setup>
import SportsPopularTitles from './sports-popular-titles.vue'
import { SportsMatchList, SportsSwiper } from '@/components/sports'
import { inject, Ref } from 'vue'
import { SportsType } from '@/enums'

const sportId = inject<Ref<SportsType | undefined>>('sportId')
</script>
